<!DOCTYPE html>
<html>
<head>
    <title>模具健康地图</title>
    #parse("sys/header.html")
    <style>
        #main_app {
            background-color: #eee;
            padding: 10px
        }
        .kpiRow {
            padding: 5px;
        }
        .kpiCol {
            height: 275px;
            padding-right: 10px;
        }
        .ivu-col{
            padding-right: 0px;
        }
        .box {
            display: flex;
            flex-direction: column;
        }

        .item {
            margin-bottom: 20px;
            border: 4px double #333;
            padding: 10px;
        }

        .leve1 {
            display: flex;
        }
        .leve1 .leve1-title {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            border: 4px double #333;
            writing-mode: vertical-rl;
        }
        .leve1 .leve1-children {
            margin-left: 10px;
        }

        .leve2 {
            display: flex;
            margin-bottom: 10px;
        }
        .leve2 .leve2-title {
            display: flex;
            align-items: center;
            padding: 0 20px;
            border: 4px double #333;
            width: 70px;
        }

        .leve2:last-child {
            margin-bottom: 0px;
        }

        .leve2-children {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
        }
        .leve2-children > div {
            border: 2px solid #333;
            margin: 0 6px 4px;
            width: 200px;
            text-align: center;
        }

        .leve3 {
            display: flex;
            flex-direction: column;
        }
        .leve3 > div:first-child {
            padding: 10px 0;
            border-bottom: 1px solid #999;
        }
        .leve3 > div:last-child {
            display: flex;
        }
        .leve3 > div:last-child > div {
            flex: 1;
            text-align: center;
            padding: 6px 0;
            border-right: 1px solid #999;
        }
        .leve3 > div:last-child div:last-child {
            border-right: none;
            line-height:  32px;
        }
        .tips {
            position: fixed;
            right: 0;
            top: 0;
        }
        .tips div {
            padding: 10px 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="main_app" v-cloak>
    <Row :gutter="16" style="margin: 3px 0px">
        <i-col span="3">
            <i-select v-model="workshopId">
                <i-option v-for="workshop in workshopList" :value="workshop.deptId" :key="workshop.deptId">
                    {{workshop.name}}
                </i-option>
            </i-select>
        </i-col>
        <i-button @click="query" icon="ios-search" type="primary">查看模具健康地图</i-button>
    </Row>
    <!-- 模具健康地图区域  -->
    <Row :gutter="24">
        <div class="box">
            <div v-for="(firstMoldTypeData, index) in moldStatusDataList" :key="firstMoldTypeData.id" class="item">
                <div class="leve1">
                    <div class="leve1-title">{{ firstMoldTypeData.name }}</div>
                    <div class="leve1-children">
                        <div v-for="(secondMoldTypeData, index) in firstMoldTypeData.children" :key="secondMoldTypeData.id" class="leve2">
                            <div class="leve1-title">{{ secondMoldTypeData.name }}</div>
                            <div class="leve2-children">
                                <div v-for="(moldStatusData, index) in secondMoldTypeData.children" :key="moldStatusData.id" class="leve3" :style="renderItem(moldStatusData.moldStatus)" @click="moldStatusUpdateParam.moldId = moldStatusData.id" >
                                    <div>{{ moldStatusData.moldPageCode }}</div>
                                    <div>
                                        <div>
                                            <i-select v-model="moldStatusData.moldStatus" @on-change="updateMoldStatus"  :style="renderItem(moldStatusData.moldStatus)">
                                                <i-option v-for="moldStatusCss in moldStatusCssList" :disabled="moldStatusCss.disabled" :value="moldStatusCss.status">
                                                    {{moldStatusCss.desc}}
                                                </i-option>
                                            </i-select>
                                        </div>
                                        <div>{{ moldStatusData.useNo }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 模具状态样式区域 -->
            <div class="tips">
                <div v-for="moldStatusCss in moldStatusCssList" :style="moldStatusCss.css" @click="loadMoldByStatus(moldStatusCss)">{{moldStatusCss.desc}}</div>
            </div>
        </div>
    </Row>
</div>

<script src="${rc.contextPath}/js/module/moldOverview.js?_${date.systemTime}"></script>
</body>
</html>
